<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" tip="无订单数据"></use-empty>
		<!-- 订单列表区 -->
		<view v-else class="padding-lr margin-bottom-sm" v-for="(item, index) in datas" :key="index">
			<!-- 订单项 -->
			<view class="order-item padding bg-main border-radius">
				<view class="margin-bottom-sm">
					<text class="fs-xs">姓名:{{ item.order_member_name}}</text>
					<view class="fs-xs">电话:{{item.order_member_mobile}}</view>
					<view class="fs-xs">提货时间:{{$api.format(item.create_time, 'yyyy-MM-dd hh:mm')}}</view>
					<view class="fs-xs">地址:{{item.order_consignee_addr}}{{item.order_consignee_addr_detail}}</view>
				</view>
				<view @click="todetail(item)">
					<!-- 订单商品明细 -->
					<view class="goods-area pos-r" v-for="(goodsItem, goodsIndex) in item.goods" :key="goodsIndex">
						<image :src="goodsItem.goods_sku_img || goodsItem.goods_img" class="border-radius" mode="aspectFill">
						</image>
						<view class="right flex1">
							<text class="clamp-2">{{ goodsItem.goods_name }}
								{{ goodsItem.goods_name_pw }}</text>
							<view class="ft-dark fs-xs padding-top-xs">
								<text class="margin-right-sm">× {{goodsItem.goods_num}}</text>
								{{ goodsItem.goods_sku_name || '&nbsp;&nbsp;' }}
							</view>
						</view>
					</view> 
				</view>

				<!-- 订单操作区 -->
				<view class="dflex-b margin-top">
					<view>
						<!-- 当前状态 -->
						<text class="ft-dark">{{ item.state }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 上拉加载更多 -->
		<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState(['member'])
		},
		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
			};
		},
		watch: {
			datas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onLoad: function() {
			this.loadData();
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		methods: {
			loadData() {
				this.$func.wmzmall.call('channel/order_th').then(res => {
					if (res.code == 200) {
						this.datas = res.datas.data
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.product {
		display: flex;

		.left {
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.price-box {
			bottom: -20rpx;
		}
	}

	/* 订单项 */
	.order-item {

		/* 订单商品明细区 */
		.goods-area {
			display: flex;

			image {
				width: 180rpx;
				height: 180rpx;
			}

			.right {
				padding: 0 0 0 24rpx;
				overflow: hidden;

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>